<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>色彩题生成器</title>
    <style>
        #count{
            margin-top: 1rem;
        }
    </style>
</head>
<body>
    <div class="layui-card">
        <div class="layui-card-header">
            色彩题生成器
        </div>
        <div class="layui-card-body">
            <div class="layui layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">题目数量</label>
                    <div class="layui-input-block">
                        <input type="number" id="total" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">正确数量</label>
                    <div class="layui-input-block">
                        <input type="number" id="right" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">错误数量</label>
                    <div class="layui-input-block">
                        <input type="number" id="wrong" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">随机范围</label>
                    <div class="layui-input-block">
                        <input type="number" id="range" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">标题字号</label>
                    <div class="layui-input-block">
                        <input type="number" value="45" id="question-size" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">选项字号</label>
                    <div class="layui-input-block">
                        <input type="number" id="answer-size" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">选项无色</label>
                    <div class="layui-input-block">
                        <input class="layui-input" type="radio" name="option-black" title="否" value="0" checked>
                        <input class="layui-input" type="radio" name="option-black" title="是" value="1" >
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">模式</label>
                    <div class="layui-input-block">
                        <input class="layui-input" type="radio" name="eng" title="汉字" value="0" checked>
                        <input class="layui-input" type="radio" name="eng" title="英文" value="1">
                        <input class="layui-input" type="radio" name="eng" title="色块" value="2">
                        <input class="layui-input" type="radio" name="eng" title="英中" value="3">
                        <input class="layui-input" type="radio" name="eng" title="中英" value="4">
                    </div>
                </div>
            </div>
            <!-- <p><span>题目数量</span><input type="number" id="total"></p>
            <p><span>正确答案数量</span><input type="number" id="right"></p>
            <p><span>错误答案数量</span><input type="number" id="wrong"></p>
            <p><span>随机范围</span><input type="number" id="range"></p>
            <p><span>题干字号</span><input type="number" value="45" id="question-size"></p>
            <p><span>答案字号</span><input type="number" id="answer-size"></p>
            <p><span>选项无色</span><input type="radio" name="option-black" value="0" checked><label>否</label><input type="radio" name="option-black" value="1" ><label>是</label></p>
            <p><span>简单模式</span><input type="radio" name="easy" value="0" checked><label>否</label><input type="radio" name="easy" value="1" ><label>是</label></p>
            <p><span>英文模式</span><input type="radio" name="eng" value="0" checked><label>否</label><input type="radio" name="eng" value="1"><label>是</label></p> -->
            <div class="layui-form-item">
                <label class="layui-form-label">生成配置</label>
                <div class="layui-input-block">
                    <button class="layui-btn" onclick="generateString()">
                        生成
                    </button>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">生成结果</label>
                <div class="layui-input-block">
                    <textarea id="result" rows="12" class="layui-textarea"></textarea>
                    <p id="count"></p>
                </div>
            </div>
            <!-- <p><textarea id="result" rows="10"></textarea></p> -->
        </div>
    </div>
</body>
<script>
// 确定范围
const colorMap = {
    red: '红',
    green: '绿',
    blue: '蓝',
    yellow: '黄',
    black: '黑',
    white: '白',
    purple: '紫',
    orange: '橙',
    // gray: '灰',
    brown: '棕',
    pink: '粉',
    cyan: '青'
}
// 上面对象中各个颜色对应的十六进制
const colorHex = {
    red: '#FF0000',
    green: '#00B600',
    blue: '#0000FF',
    yellow: '#FFFF00',
    black: '#000000',
    white: '#FFFFFF',
    purple: '#800080',
    orange: '#FF6500',
    // gray: '#808080',
    brown: '#8B4513',
    pink: '#FFC0CB',
    cyan: '#00FFFF'
}
// 便利对象
const colorArr = [];
for(let key in colorMap){
    colorArr.push(key);
}
// 色块列表
const blockArr = ['\u25A0','\u25B2','\u25A0','\u2B22','\u2BC1','\u25CF']

// 生成题目对象
function generateQuestion(total, right, wrong, isBlack, range, isEasy, mode){
    let arr = colorArr;
    let result = [];
    for(let i = 0; i < total; i ++){
        let questionObj = {
            question: {},
            rightList: [],
            wrongList: []
        };
        // 取一个随机数 颜色种子
        // seedRange 随机数范围 0 ~ range-1
        const seedRange = Array.from({length: range}, (item, index) => index);
        let randomSeed = i % range;
        let color = colorArr[randomSeed];
        // 错误选项的种子，取剩下的种子范围
        const seedRange2 = seedRange.filter(item => item != randomSeed);
        let randomSeed2 =  seedRange2[Math.floor(Math.random() * seedRange2.length)];
        // 模式 0 汉字，1 英文，2 色块，3 英中，4 中英
        let block = blockArr[Math.floor(Math.random() * blockArr.length)]
        const wordMap = [colorMap[colorArr[randomSeed2]], colorArr[randomSeed2], block,  colorArr[randomSeed2], colorMap[colorArr[randomSeed2]]]
        let word = wordMap[mode];
        questionObj.question = {
            color: colorHex[color],
            word: word,
        }
        let colorRange = Array.from({length: range}, (item, index) => index).filter(item => item != randomSeed2)
        let wordRange = Array.from({length: range}, (item, index) => index).filter(item => item != randomSeed)
        for(let j = 0; j < right; j ++){
            // 正确答案是word=>seed.word color和word不同
            // 排除调randomSeed2 错误选项的颜色，保证正确选项的颜色肯定不是干扰项对应的颜色
            if(colorRange.length == 0){
                break;
            }
            let random = colorRange[Math.floor(Math.random() * colorRange.length)];
            let right = {
                color: isBlack ? '#FFFFFF' : colorHex[colorArr[random]],
                word: mode == 1 || mode == 4 ? color : colorMap[color]
            }
            questionObj.rightList.push(right);
            colorRange = colorRange.filter(item => item != random);
            // 选项无色 正确选项就只有一个了
            if(isBlack) break;
        }
        for(let j = 0; j < wrong; j ++){
            // 错误答案是color=>seed.color color和word不同
            // 排除掉randomSeed, 正确选项的颜色，保证错误选项的答案的字不是正确的颜色的字
            if(wordRange.length == 0){
                break;
            }
            // 这里把错误选项的逻辑顺一顺
            let random = wordRange[Math.floor(Math.random() * wordRange.length)];
            let wrongWord = ''
            // 中文选项，有简单模式
            if(mode == 0){
                wrongWord = isEasy ? colorMap[colorArr[random + 6]] : colorMap[colorArr[random]];
            }
            // 英文选项，有简单模式
            else if(mode == 1){
                wrongWord = isEasy ? colorArr[random + 6] : colorArr[random];
            }
            else if(mode == 2){
                wrongWord = isEasy ? colorMap[colorArr[random + 6]] : colorMap[colorArr[random]];
            }
            // 英文题干，中文选项，中文的错误选项时英文单词翻译成的中文
            else if(mode == 3){
                // randomSeed2是题目的单词的词义
                wrongWord = colorMap[colorArr[randomSeed2]]
            }
            else if(mode == 4){
                // randomSeed2是题目的单词的词义
                wrongWord = colorArr[randomSeed2]
            }
            let wrong = {
                color: isBlack ? '#FFFFFF' : mode == 2 ? colorHex[colorArr[randomSeed]] : colorHex[colorArr[randomSeed2]],
                word: wrongWord
            } 
            questionObj.wrongList.push(wrong);
            wordRange = wordRange.filter(item => item != random);
        }
        result.push(questionObj);
    }
    console.log(result);
    return result;
}
// 生成富文本字符串
function generateString(){
    let total = $('#total').val() || colorArr.length;
    let right = $('#right').val() || 3
    let wrong = $('#wrong').val() || 3
    let isBlack = $('input[name="option-black"]:checked').val() == 1
    let range = $('#range').val() || colorArr.length;
    let isEasy = $('input[name="easy"]:checked').val() == 1
    let mode = $('input[name="eng"]:checked').val();
    let questionSize = $('#question-size').val();
    let optionSize = $('#answer-size').val();
    let qtag1 = '<size=' + questionSize + '>';
    let qtag2 = '</size>';
    let otag1 = (optionSize ? '<size=' + optionSize + '>' : '') + (isBlack ? '<outline color=#000000 width=1>' : '')
    let otag2 = (isBlack ? '</outline>' : '') + (optionSize ? '</size>' : '');
    let res = generateQuestion(total, right, wrong, isBlack, range, isEasy, mode);
    let configArr = [];
    for(let i = 0;i < res.length; i ++){
        let item = res[i];
        let configItem = {
            question: qtag1 + "<b><color=" + item.question.color + ">" + item.question.word + "</color></b>" + qtag2,
            rightList: [],
            wrongList: []
        }
        for(let j = 0;j<item.rightList.length;j++){
            let rightItem = item.rightList[j];
            configItem.rightList.push( otag1 + "<b><color=" + rightItem.color + ">" + rightItem.word + (mode == 0 || mode == 3 ? '色' : '') + "</color></b>" + otag2); 
        }
        for(let j = 0;j<item.wrongList.length;j++){
            let wrongItem = item.wrongList[j];
            configItem.wrongList.push( otag1 + "<b><color=" + wrongItem.color + ">" + wrongItem.word + (mode == 0 || mode == 3 ? '色' : '') + "</color></b>" + otag2); 
        }
        configArr.push(configItem);
    }
    let config = JSON.stringify(configArr);
    let result = document.getElementById('result');
    result.value = config;
}
</script>
</html>